<template>
  <div class="home-card">
    <img class="card-bg" src="@/assets/images/home_bg.png" alt="" />
    <div class="user-card flex flex-space">
      <img class="user-avatar" :src="props.avatar" alt="" />
      <div class="user-info flex flex-column align-start flex-grow">
        <div class="user-name">{{ props.username }}</div>
        <div class="user-switch flex" @click="handleChangeUser">
          <div class="switch-text">切换账号</div>
          <img class="switch-icon" src="@/assets/images/switch_icon.png" alt="" />
        </div>
      </div>
      <div class="record flex" @click="handleRecord">
        <div class="record-text">购物金记录</div>
        <img class="record-icon" src="@/assets/images/icon_details.png" alt="" />
      </div>
    </div>
    <div class="tips flex" @click="handleTips">
      <img class="tips-icon" src="@/assets/images/tips_icon.png" />
      <div class="tips-text font-500">购物金说明</div>
    </div>
    <div class="amount-label font-500">购物金余额（元）</div>
    <div class="amount-card flex flex-end">
      <div class="amount-unit">￥</div>
      <div class="amount-int">{{ splitPrice.int || '' }}</div>
      <div class="amount-float">{{ splitPrice.decimal || '' }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { splitAmount } from '@/utils/utils'
import { computed } from 'vue'

interface HomeCardProps {
  amount: string
  username: string
  avatar: string
}
const props = withDefaults(defineProps<HomeCardProps>(), {
  amount: '',
  mobile: '',
  avatar: '',
})
const splitPrice = computed(() => {
  return splitAmount(props.amount || '0')
})
const emit = defineEmits<{
  (e: 'on-change-user', value: ''): void
  (e: 'on-record', value: ''): void
  (e: 'on-tips', value: ''): void
}>()
const handleChangeUser = () => {
  emit('on-change-user', '')
}
const handleRecord = () => {
  emit('on-record', '')
}
const handleTips = () => {
  emit('on-tips', '')
}
</script>
<style scoped lang="scss">
.home-card {
  width: 100%;
  height: 92.53vw;
  position: relative;
}
.card-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 92.53vw;
  z-index: 0;
}
.user-card {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 54.4vw;
  padding: 0 16px;
  box-sizing: border-box;
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 40px;
  }
  .user-info {
    line-height: 1;
    margin-left: 12px;
    .user-name {
      color: #fff;
      font-size: 12px;
    }
    .user-switch {
      margin-top: 9px;
      .switch-text {
        color: #fff;
        font-size: 12px;
      }
      .switch-icon {
        width: 14px;
        margin-left: 2px;
      }
    }
  }
  .record {
    .record-text {
      font-size: 12px;
      color: #fff;
    }
    .record-icon {
      width: 9px;
      margin-left: 2px;
    }
  }
}
.tips {
  position: absolute;
  right: 24px;
  bottom: 44.9vw;
  .tips-text {
    font-size: 10px;
    color: #a05b35;
    margin-left: 2px;
  }
  .tips-icon {
    width: 12px;
    height: 12px;
  }
}
.amount-label {
  font-size: 14px;
  color: #fff;
  position: absolute;
  right: 24px;
  bottom: 25.6vw;
  font-family: PingFang SC;
  font-style: italic;
}
.amount-card {
  line-height: 1;
  position: absolute;
  z-index: 1;
  right: 32px;
  bottom: 5.3vw;
  color: #fff8bf;
  .amount-unit {
    font-size: 25px;
    margin-top: 12px;
    font-weight: 800;
  }
  .amount-int {
    font-size: 40px;
    font-weight: 800;
  }
  .amount-float {
    font-size: 30px;
    margin-top: 8px;
    font-weight: 800;
  }
}
</style>
